<template>
  <div>
    <header>
      <p>X</p>
      <p>贾君兰-老师主页</p>
    </header>
    <div class="jianjie">
      <div class="img">
        <div class="tou"></div>
      </div>
      <div class="box1">
        <div class="box2">
          <div class="head">
            <p>贾君兰</p>
            <span>殿堂</span>
          </div>
          <div class="main">
            <ul>
              <li>
                <img src="../assets/images/icon-red@2x.png" alt="" />
                <span>独家合作</span>
              </li>
              <li>
                <img src="../assets/images/icon-blue-hui@2x.png" alt="" />
                <span>平台认证</span>
              </li>
              <li>
                <img src="../assets/images/icon-yellow@2x.png" alt="" />
                <span>交易担保</span>
              </li>
            </ul>
            <ul class="ul2">
              <li>解答数</li>
              <li>粉丝数</li>
              <li>平均回复</li>
            </ul>
            <ul class="ul3">
              <li>7608</li>
              <li>908</li>
              <li>10分钟</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="title">
      <p>从业年限</p>
      <span>12年</span>
    </div>
    <div class="shanchang">
      <div class="title">
        <p>擅长领域</p>
      </div>
      <div class="tag">
        <van-tag plain type="primary">六爻</van-tag>
        <van-tag plain type="primary">八字</van-tag>
        <van-tag plain type="primary">奇门</van-tag>
      </div>
    </div>
    <div class="tag-box">
      <div class="title">
        <p>标签</p>
      </div>
      <div class="tag">
        <van-tag type="primary" style="background-color: #ff607a"
          >炒鸡耐心</van-tag
        >
        <van-tag type="primary" style="background-color: #59d3ac"
          >好评如潮</van-tag
        >
        <van-tag type="primary" style="background-color: #fead58"
          >有问必答</van-tag
        >
        <van-tag type="primary" style="background-color: #37c5e2"
          >名师高徒</van-tag
        >
      </div>
    </div>
    <div class="tag-box">
      <div class="title">
        <p>大师简介</p>
      </div>
      <div class="tag">
        <img
          style="height: 300px; width: 100%"
          src="../assets/images/backgroud@3x.png"
          alt=""
        />
        <div class="intro_content">
          得民间风水精髓，只要在房子或坟地周围路过一下，就能破其家的六亲兴衰，吉凶祸福。出师独立从事风水行业已经调理过的风水达数百例。道长同时也是民俗文化继承者，尤长民间传统的喜事、丧事、祈福、择吉、起名等。
        </div>
      </div>
    </div>
    <div class="tag-box">
      <div class="title">
        <p style="border: none">从业经验</p>
      </div>
      <div class="tag">
        <div class="intro_content">
          得民间风水精髓，只要在房子或坟地周围路过一下，就能破其家的六亲兴衰，吉凶祸福。出师独立从事风水行业已经调理过的风水达数百例。道长同时也是民俗文化继承者，尤长民间传统的喜事、丧事、祈福、择吉、起名等。
        </div>
      </div>
    </div>
    <div class="study">
      <div class="study_top">学习经历</div>
      <div class="study_content">
        <div class="study_img">
          <img src="../assets/images/icon-dian@2x.png" alt="" />
        </div>
        <div class="study_center">
          <ul>
            <li>
              <p>1994年</p>
              <p>接触学习《滴天髓》 《三命通汇》</p>
            </li>
            <li>
              <p>1997年</p>
              <p>接触学习《奇门保鉴》《四柱预测学》</p>
            </li>
            <li>
              <p>2000年</p>
              <p>从师当地李姓道长学习象法解读八字2年</p>
            </li>
            <li>
              <p>2011年</p>
              <p>从师乡野道士学习茅山派易解，口耳相传7年协会资质或获奖</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="tag-box">
      <div class="title">
        <p style="border: none">民间协会认证资深大师</p>
      </div>
    </div>
    <div class="item">
      <div class="item_top">服务案例</div>
      <div class="item_01">
        服务案例数，截止到目前，服务过的用户超过<span>10000</span>名
      </div>
      <div class="item_02">服务合作过的企业项目</div>
      <div class="item_03">
        <img src="../assets/images/logo@2x.png" alt="" />
        <img src="../assets/images/logo@2x.png" alt="" />
        <img src="../assets/images/logo@2x.png" alt="" />
      </div>
    </div>
    <!-- 评论 -->
    <div class="comment tag-box">
      <div class="comment_top title">
        <p>评价反馈</p>
      </div>
      <div class="comment_center01">
        <div class="comment_img">
          <img src="../assets/images/取消关注、@2x.png" alt="" />
        </div>
        <div>
          <div>
            <p>李先生</p>
            <p>
              <img src="../assets/images/xingxing@2x.png" alt="" /><img
                src="../assets/images/xingxing@2x.png"
                alt=""
              /><img src="../assets/images/xingxing@2x.png" alt="" /><img
                src="../assets/images/xingxing@2x.png"
                alt=""
              /><img src="../assets/images/xingxing@2x.png" alt="" /> 5.0分
            </p>
          </div>
          <p class="p1">2018-09-18</p>
          <p class="p2">
            请问老师，我更适合什么样的工作？顺便请老师对我的性格特征和现状分析一下
          </p>
        </div>
      </div>
      <div class="comment_center01">
        <div class="comment_img">
          <img src="../assets/images/取消关注、@2x.png" alt="" />
        </div>
        <div>
          <div>
            <p>李先生</p>
            <p>
              <img src="../assets/images/xingxing@2x.png" alt="" /><img
                src="../assets/images/xingxing@2x.png"
                alt=""
              /><img src="../assets/images/xingxing@2x.png" alt="" /><img
                src="../assets/images/xingxing@2x.png"
                alt=""
              /><img src="../assets/images/xingxing@2x.png" alt="" /> 5.0分
            </p>
          </div>
          <p class="p1">2018-09-18</p>
          <p class="p2">
            请问老师，我更适合什么样的工作？顺便请老师对我的性格特征和现状分析一下
          </p>
        </div>
      </div>
      <div class="comment_foot">
        <p>没关系，谢谢你的好评！</p>
        <div class="div1">
          <div class="img">
            <img src="../assets/images/取消关注、@2x.png" alt="" />
          </div>
          <div class="divs">
            <div class="to">
              <span>李天师</span>
            </div>
            <ul>
              <li>六爻</li>
              <li>奇门</li>
              <li>八字</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
div {
  width: 100%;
  height: 100%;
  header {
    height: 80px;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #f2f2f2;
    font-size: 30px;
    p {
      margin-left: 20px;
    }
  }

  .jianjie {
    position: relative;
    height: 640px;
    .img {
      width: 100%;
      height: 330px;
      background: url("../assets/images/backgroud@2x.png") no-repeat center
        center;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .tou {
        width: 186px;
        height: 186px;
        border-radius: 50%;
        border: 10px solid rgba($color: white, $alpha: 0.2);
        box-shadow: 0 10px 50px 10px #5372b8;
        background: url("../assets/images/取消关注、@3x.png") no-repeat center
          center;
        background-color: white;
        background-size: 100% 100%;
        z-index: 5;
      }
    }
    .box1 {
      background-color: white;
      width: 95%;
      height: 445px;
      // margin: -150px auto;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 0 50px 5px #e1e1e1;
      position: absolute;
      top: 160px;
      left: 20px;
      .box2 {
        height: 360px;
        margin-top: 140px;
        .head {
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 40px;
          p {
            font-size: 30px;
            margin: 0 10px;
          }
          span {
            line-height: 50px;
            width: 80px;
            font-size: 22px;
            color: white;
            border-radius: 10px;
            background-color: #ff6f6d;
            text-align: center;
          }
        }
        .main {
          // display: flex;
          // justify-content: space-around;
          height: 80px;
          ul {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            font-size: 34px;
            height: 100%;
            li {
              display: flex;
              align-items: center;

              img {
                width: 34px;
                height: 34px;
                margin-right: 5px;
              }
            }
          }
          .ul2 {
            font-size: 30px;
          }
          .ul3 {
            font-size: 42px;
          }
        }
      }
    }
  }
  .shanchang,
  .tag-box,
  .study,
  .item {
    border-top: 40px solid #f2f2f2;
    .title {
      width: 95%;
      p {
        width: 100%;
      }
    }
    .tag {
      width: 95%;
      line-height: 150px;
      // margin-left: 20px;
      margin: auto;
      border-top: 2px solid #f2f2f2;
      .van-tag {
        margin-right: 20px;
        font-size: 32px;
        width: 100px;
        height: 60px;
        border-radius: 15px;
        color: blue;
        text-indent: 20px;
      }
    }
  }
  .study {
    height: 900px;
    width: 100%;
    border-top: 40px solid #f2f2f2;
    font-size: 32px;
    .study_top {
      height: 90px;
      width: 95%;
      margin: auto;
      font-size: 32px;
      border-bottom: 1px solid #f2f2f2;
      display: flex;
      align-items: center;
    }

    .study_content {
      display: flex;
      width: 95%;
      height: 620px;
      margin: auto;
      .study_img {
        margin: 54px 4px;
        width: 25%;
        height: 600px;

        img {
          height: 600px;
          width: 100%;
        }
      }

      .study_center {
        ul {
          margin: 54px 0;

          li {
            height: 62px;
            margin-bottom: 125px;

            p:first-child {
              font-size: 22px;
              margin-bottom: 20px;
            }

            p:last-child {
              font-size: 20px;
              color: #666666;
            }
          }
        }
      }
    }
  }
  .item {
    padding: 0 20px;

    .item_top {
      font-size: 34px;
      line-height: 90px;
    }

    .item_01 {
      font-size: 20px;
      margin: 20px 0;
      line-height: 50px;
      border-top: 2px solid #f2f2f2;
      span {
        color: red;
      }
    }

    .item_02 {
      margin: 20px 0;
      font-size: 22px;
    }

    .item_03 {
      display: flex;
      justify-content: space-around;
      margin: 40px 0;

      img {
        width: 180px;
        height: 40px;
      }
    }
  }
  // 评论
  .comment {
    // padding: 20px;
    .comment_top {
      height: 90px;
      border-bottom: 1px solid #f2f2f2;
      display: flex;
      align-items: center;
    }

    .comment_center01 {
      margin-top: 32px;
      display: flex;
      border-bottom: 2px solid #f2f2f2;

      .comment_img {
        width: 56px;
        height: 56px;
        img {
          width: 56px;
          height: 56px;
        }
      }

      div {
        margin: 0 20px;

        div {
          display: flex;
          justify-content: space-between;
          margin: 0;
          padding: 0 40px 20px 0;

          p:nth-child(2) {
            font-size: 30px;
          }

          img {
            width: 20px;
            height: 20px;
          }
        }

        .p1 {
          font-size: 18px;
          color: #999999;
        }

        .p2 {
          margin: 34px 0 40px;
          line-height: 38px;
          font-size: 24px;
        }
      }
    }

    .comment_foot {
      margin-left: 100px;

      p {
        line-height: 90px;
        font-size: 32px;
      }

      .div1 {
        width: 560px;
        height: 162px;
        background-color: #f2f2f2;
        border-radius: 15px;
        display: flex;
        align-items: center;
        margin-right: 36px;
        .img {
          width: 56px;
          height: 56px;
          margin-left: 10px;

          img {
            width: 56px;
            height: 56px;
          }
        }

        .divs {
          height: 56px;
          margin-left: 10px;

          .to {
            display: flex;

            span {
              font-size: 30px;
            }
          }
          ul {
            display: flex;
            li {
              width: 56px;
              height: 26px;
              font-size: 18px;
              border: 1px solid #0527af;
              border-radius: 10px;
              margin-right: 20px;
              color: #0527af;
              text-align: center;
              line-height: 26px;
            }
          }
        }
      }
    }
  }

  .tag-box {
    .tag {
      .van-tag {
        width: 150px;
        height: 60px;
        color: #fff;
      }
      .intro_content {
        font-size: 24px;
        text-indent: 50px;
        line-height: 50px;
      }
    }
  }
}
.title {
  height: 90px;
  width: 97%;
  padding-left: 20px;
  display: flex;
  font-size: 30px;
  align-items: center;
  p {
    width: 150px;
    line-height: 40px;
    border-left: 10px solid blue;
    padding: 0 30px 0 10px;
    font-size: 34px;
  }
}


</style>